<template>
  <div class="change" align="center">
    <div class="switch-box" v-if="self">
      <input id="switchButton" ref="check" type="checkbox" class="switch" />
      <label for="switchButton" @click="change"></label>
    </div>
    <div class="switch-box-1" v-else>
      <input id="switchButton" ref="check" type="checkbox" class="switch" />
      <label for="switchButton" @click="change"></label>
    </div>
  </div>
</template>

<script>
export default {
  name: "change",
  data() {
    return {
      self: true,
      isLogin: null,
    };
  },
  computed: {
    isTakeSelf() {
      return this.$store.getters.isTakeSelf;
    },
    user() {
      return this.$store.getters.userInfo;
    },
  },
  mounted() {
    if (this.isTakeSelf == 0) {
      this.self = false;
    } else {
      this.self = true;
    }
    if (this.user != null) {
      this.isLogin = true;
    } else {
      this.isLogin = false;
    }
  },
  methods: {
    change() {
      // console.log("isTakeSelf",this.isTakeSelf)
      // console.log("isLogin",this.isLogin)
      if (this.isTakeSelf == 0) {
        console.log("change改变", 1);
        this.$store.dispatch("setIsTakeSelf", 1);
      } else {
        if (this.isLogin) {
          console.log("change改变", 0);
          this.$store.dispatch("setIsTakeSelf", 0);
        } else {
          console.log("未登录,无法选择外卖");
          this.$emit("changeShowLogin");
        }
      }
    },
  },
  components: {},
  watch: {},
};
</script>

<style scoped>
.change {
  display: flex;
  flex-direction: row-reverse;
  justify-content: right;
}
.switch-box {
  width: 80px;
}
.switch-box .switch {
  /* 隐藏checkbox默认样式 */
  display: none;
}
.switch-box label {
  /* 通过label扩大点击热区 */
  position: relative;
  display: block;
  margin: 1px;
  height: 28px;
  cursor: pointer;
}
/* before设置前滚动小圆球 */
.switch-box label::before {
  content: "自取";
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -29px;
  width: 40px;
  height: 25.5px;
  line-height: 25px;
  text-align: center;
  border-radius: 30px;
  background-color: #333;
  color: #fff;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.06);
  -webkit-transform: translateX(-8.5px);
  -moz-transform: translateX(-8.5px);
  transform: translateX(-8.5px);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.switch-box .switch:checked ~ label::before {
  /* 语义：被选中的类名为"switch"元素后面的label元素里的伪类元素，进行更改css样式 */
  /* 形成伪类结构选择器：":"冒号加布尔值"checked" */
  /* " Ele1 ~ Ele2 "波浪号在css的作用：连接的元素必须有相同的父元素，选择出现在Ele1后的Ele2（但不必跟在Ele1，也就是说可以并列）  */

  content: "外卖";
  -webkit-transform: translateX(26.8px);
  -moz-transform: translateX(26.8px);
  transform: translateX(26.8px);
}
.switch-box label::after {
  /* after设置滚动前背景色 */
  content: "自取\00A0\00A0\00A0外卖";
  color: grey;
  font-size: 14px;
  line-height: 28px;
  display: block;
  border-radius: 30px;
  height: 28px;
  background-color: #dcdfe6;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.switch-box .switch:checked ~ label::after {
  background-color: #dcdfe6;
}
/* 外卖 */
.switch-box-1 {
  width: 80px;
}
.switch-box-1 .switch {
  /* 隐藏checkbox默认样式 */
  display: none;
}
.switch-box-1 label {
  /* 通过label扩大点击热区 */
  position: relative;
  display: block;
  margin: 1px;
  height: 28px;
  cursor: pointer;
}
/* before设置前滚动小圆球 */
.switch-box-1 label::before {
  content: "外卖";
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -29px;
  width: 40px;
  height: 25.5px;
  line-height: 25px;
  text-align: center;
  border-radius: 30px;
  background-color: #333;
  color: #fff;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.06);
  -webkit-transform: translateX(26.8px);
  -moz-transform: translateX(26.8px);
  transform: translateX(26.8px);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.switch-box-1 .switch:checked ~ label::before {
  /* 语义：被选中的类名为"switch"元素后面的label元素里的伪类元素，进行更改css样式 */
  /* 形成伪类结构选择器：":"冒号加布尔值"checked" */
  /* " Ele1 ~ Ele2 "波浪号在css的作用：连接的元素必须有相同的父元素，选择出现在Ele1后的Ele2（但不必跟在Ele1，也就是说可以并列）  */

  content: "自取";
  -webkit-transform: translateX(-8.5px);
  -moz-transform: translateX(-8.5px);
  transform: translateX(-8.5px);
}
.switch-box-1 label::after {
  /* after设置滚动前背景色 */
  content: "自取\00A0\00A0\00A0外卖";
  color: grey;
  font-size: 14px;
  line-height: 28px;
  display: block;
  border-radius: 30px;
  height: 28px;
  background-color: #dcdfe6;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.switch-box-1 .switch:checked ~ label::after {
  background-color: #dcdfe6;
}
</style>